<template>
    <div class="box">
        <!-- 
            v-for的语法
            v-for="(数组元素项目对象名,在数组中的索引值) in 数组名"
         -->
        <div class="item" v-for="(item,index) in books" :key="index">
            <div class="item-1">
                <img :src="item.cover" alt="item.title">
            </div>
            <div class="item-2"></div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            books:[
                {
                    isbn:'isbn1001',
                    title:'两河文明三千年',
                    cover:'https://img3m5.ddimg.cn/17/32/29385395-1_w_11.jpg',
                    price:124.60,
                    author:['乔治·鲁','李海峰','陈艳丽'],
                    press:':大象出版社'
                },
                {
                    isbn:'isbn1002',
                    title:'赛雷三分钟漫画西游记123',
                    cover:'https://img3m8.ddimg.cn/92/9/29422298-1_w_7.jpg',
                    price:142.20,
                    author:['赛雷'],
                    press:'湖南文艺出版社'
                },
                {
                    isbn:'isbn1003',
                    title:'小学生学习高手',
                    cover:'https://img3m2.ddimg.cn/53/7/29425922-1_w_9.jpg',
                    price:39.40,
                    author:['李拓远'],
                    press:'北京联合出版有限公司'
                },
                {
                    isbn:'isbn1004',
                    title:'两河文明三千年',
                    cover:'https://img3m5.ddimg.cn/17/32/29385395-1_w_11.jpg',
                    price:124.60,
                    author:['乔治·鲁','李海峰','陈艳丽'],
                    press:':大象出版社'
                },
                {
                    isbn:'isbn1005',
                    title:'赛雷三分钟漫画西游记123',
                    cover:'https://img3m8.ddimg.cn/92/9/29422298-1_w_7.jpg',
                    price:142.20,
                    author:['赛雷'],
                    press:'湖南文艺出版社'
                },
                {
                    isbn:'isbn1006',
                    title:'小学生学习高手',
                    cover:'https://img3m2.ddimg.cn/53/7/29425922-1_w_9.jpg',
                    price:39.40,
                    author:['李拓远'],
                    press:'北京联合出版有限公司'
                },
                {
                    isbn:'isbn1007',
                    title:'两河文明三千年',
                    cover:'https://img3m5.ddimg.cn/17/32/29385395-1_w_11.jpg',
                    price:124.60,
                    author:['乔治·鲁','李海峰','陈艳丽'],
                    press:':大象出版社'
                },
                {
                    isbn:'isbn1008',
                    title:'两河文明三千年',
                    cover:'https://img3m5.ddimg.cn/17/32/29385395-1_w_11.jpg',
                    price:124.60,
                    author:['乔治·鲁','李海峰','陈艳丽'],
                    press:':大象出版社'
                }
            ]
        }
    }
}
</script>

<style lang="scss">
    .box{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items:center;
        width: 770px;
        height: 550px;
        margin: 100px auto;
        background-color: gray;
        .item{
            display: flex;
            flex-direction: column;
            width: 176px;
            height: 238px;
            background-color: orange;
            margin: 5px;
            .item-1{
                display: flex;
                width: 100%;
                height: 150px;
                justify-content: center;
                background-color: red;
                img{
                   height: 150px; 
                }
            }
            .item-2{
                flex-grow: 1;
                background-color: springgreen;
            }
        }
    }
</style>